<template>
  <div class="camera">
    <div class="cameraName">
      <i class="el-icon-camera"></i> {{ cameraType }} 号相机
      <div class="camera-status">
        <div
          class="light"
          :style="{ backgroundColor: colorList[cameraStatus] }"
        ></div>
        {{ cameraStatus | filterStatus }}
      </div>
    </div>
    <div
      class="camera-list"
      v-if="glassData != null && glassData.id != null "
    >
      <div class="item">
        <div class="glass-name">ID:</div>
        <div class="glass-value">{{ glassData.id }}</div>
      </div>
      <div class="item">
        <div class="glass-name">客户名:</div>
        <div class="glass-value">{{ glassData.clientName }}</div>
      </div>
      <div class="item">
        <div class="glass-name">识别码:</div>
        <div class="glass-value">
          {{ glassData.optCodeContext }}
        </div>
      </div>
      <div class="item">
        <div class="glass-name">品种:</div>
        <div class="glass-value">
          {{ glassData.type }}
        </div>
      </div>
    </div>
    <div class="camera-list" v-else>
      <div class="mepty-status">暂无数据</div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    cameraType: {
      type: String,
      default: "",
    },
    place: {
      type: Number,
      default: 0,
    },
    glassData: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  methods: {
    check(){
      if (
        this.glassData.createTime !=null &&
        Date.now() - new Date(this.glassData.createTime).getTime() <
        5  * 1000
      ) {
        this.isShow = true;
        this.cameraStatus = 1;
      } else {
        this.isShow = false;
        this.cameraStatus = 0;
      }
    }
  },
  data() {
    return {
      colorList: ["#fac427", "#269745", "#e64032"],
      glassType: ["白玻"],
      glassInfo: null,
      cameraStatus: 0,
      timer: null,
      isShow: true,
    };
  },
  filters: {
    filterStatus(e) {
      let arr = ["空闲", "成功", "失败"];
      return arr[e];
    },
  },
  computed: {},
  created() {
    clearInterval(this.timer)
    this.check()
    this.timer = setInterval(() => {
      this.check()
    }, 1000);
  },
  destroyed() {
    clearInterval(this.timer);
  },
};
</script>

<style lang="less" scoped>
.camera {
  flex: 1;
  width: 210px;
  height: 165px;
  display: flex;
  flex-direction: column;

  .cameraName {
    font-size: 17px;
    height: 40px;
    font-weight: bold;
    display: flex;
    align-items: center;
    box-shadow: 3px 3px 3px #e6e6e6;
    padding: 0 0 0 10px;
    .camera-status {
      margin-left: auto;
      display: flex;
      align-items: center;
      margin-right: 5px;
      .light {
        height: 15px;
        width: 15px;
        border-radius: 50%;
        margin-right: 3px;
      }
    }
  }
  ::v-deep.el-icon-camera {
    font-size: 24px;
    margin-right: 5px;
  }
  .camera-list,
  .error-list {
    padding: 0 0 0 10px;
    display: flex;
    flex-direction: column;
    flex: 1;
    // border-right: 1px solid #dcdfe6;
    .item {
      flex: 1;
      display: flex;
      align-items: center;
      .glass-name {
        min-width: 60px;
      }
      .glass-value {
        flex: 1;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        text-align: right;
        padding-right: 5px;
      }
    }
    .mepty-status {
      display: flex;
      flex: 1;
      align-items: center;
      justify-content: center;
      font-size: 14px;
      color: #909399;
    }
    .error-status {
      display: flex;
      flex: 1;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      ::v-deep .el-icon-circle-close {
        font-size: 24px;
        color: red;
      }
      .glass-value {
        margin-top: 10px;
      }
    }
  }
}
</style>